<script setup>
import { Delete } from '@element-plus/icons-vue'
import { ref, watch, defineProps } from 'vue'
import { ElCard, ElTooltip, ElIcon, ElInput, ElCheckbox } from 'element-plus'

const props = defineProps({
	label: String,
	content: String,
	isTrue: Boolean,
	onDelete: Function,
	'onUpdate:content': Function,
	'onUpdate:isTrue': Function,
})

const localContent = ref(props.content)
const localIsTrue = ref(props.isTrue)

watch(() => props.content, (newVal) => {
	localContent.value = newVal
})

watch(() => props.isTrue, (newVal) => {
	localIsTrue.value = newVal
})

watch(localContent, (newVal) => {
	props['onUpdate:content'](newVal)
})

watch(localIsTrue, (newVal) => {
	props['onUpdate:isTrue'](newVal)
})
</script>

<template>
	<el-card
		:body-style="{ padding: '0 12px 0 12px' }"
		shadow="never"
		class="margin-bottom-16px bc"
	>
		<div class="card-header margin-top-8px">
			<span>选项 {{ label }}</span>
			<el-tooltip effect="dark" content="删除选项" placement="top">
				<el-icon color="#999999" @click="onDelete">
					<Delete />
				</el-icon>
			</el-tooltip>
		</div>
		<el-input
			v-model="localContent"
			:rows="1"
			type="textarea"
			class="margin-top-8px"
		/>
		<el-checkbox
			v-model="localIsTrue"
			size="large"
			true-label="true"
			false-label="false"
		>
			<span style="color: black"> 设置为正确答案 </span>
		</el-checkbox>
	</el-card>
</template>

<style scoped>
.margin-bottom-16px {
	margin-bottom: 16px;
}

.bc {
	background-color: #fafafa;
}

.margin-top-8px {
	margin-top: 8px;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.card-header span {
	font-size: 14px;
	font-weight: 600;
	color: #333333;
}

.card-header :nth-child(2):hover {
	cursor: pointer;
}
</style>
